<template>
	<view>
		<view class="topbox">
			<view class="title">您好,欢迎登录</view>
		</view>

		<view class="login">
			<u-form>
				<u-form-item label="用户名" borderBottom labelWidth="60">
					<u--input v-model="userName" border="none" placeholder="请输入用户名"></u--input>
				</u-form-item>
				<u-form-item label="密码" borderBottom labelWidth="60">
					<u--input v-model="password" border="none" placeholder="请输入密码"></u--input>
				</u-form-item>
			</u-form>

		<view class="button" @click="clickLogin">
			登  录
		</view>

		</view>
	</view>
</template>

<script>
	import * as mineApi from '@/common/apis/mine-api.js';
	export default {
		data() {
			return {
				userName : '',
				password : ''
			}
		},
		methods: {
			clickLogin() {
				if(this.$u.test.isEmpty(this.userName)) {
				  uni.showToast({
				  	title: '请输入用户名',
						icon: 'none'
				  })
					return
				}else if(this.$u.test.isEmpty(this.password)) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}else {
					mineApi.login({
						account: this.userName,
						password : this.password
					}).then(res=> {
						this.$store.commit('setHasLogin', true);
						this.$store.commit('setUserInfo', res);
						this.$store.commit('setToken', res.token)
						if(this.$store.state.token) {
						 uni.switchTab({
						 	url:'../course/course'
						 })
						}
					}).catch(e=> {

					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
.topbox {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.topbox::after {
		content: '';
		width: 140%;
		height: 500upx;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		border-radius: 0 0 50% 50%;
		background-color: #009B01;
	}
	.title {
		color: #FFFFFF;
		font-size: 36upx;
		margin-top: 150upx;
	}


.login {
	// position: relative;
	// top: -20upx;
	margin-top: 140upx;
	background-color: #fff;
	padding: 20upx;
	border-radius: 16upx;
	margin-left: 40upx;
	margin-right: 40upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.button {
	color: #FFFFFF;
	background-color: #009B01;
	font-size: 36upx;
	text-align: center;
	width: 80%;
	line-height: 120upx;
	margin-top: 40upx;
	border-radius: 16upx;
}

</style>
